<!--
 * @Author: jawen jawen.9@outlook.com
 * @Date: 2025-06-05 19:31:21
 * @LastEditors: jawen jawen.9@outlook.com
 * @LastEditTime: 2025-07-21 16:34:09
 * @FilePath: \yujn\src\layouts\NavigationHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="header-wrapper">
        <div class="header-inner">
            <div class="header-left">
                <img src="@/assets/vite.svg" alt="博客头像" class="blog-logo">
                <span class="navbar-title">于君的博客</span>
            </div>
            <nav class="nav-links">
                <router-link to="/">首页</router-link>
                <router-link to="/featured">精选</router-link>
                <router-link to="/archive">归档</router-link>
                <router-link to="/about">关于</router-link>
            </nav>
            <div class="header-right">
                <el-button @click="toggleTheme" size="small" circle>
                    <span v-if="theme === 'light'">🌙</span>
                    <span v-else>☀️</span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useTheme } from '../composables/useTheme.js';
const { theme, toggleTheme } = useTheme();
</script>

<style scoped>
.header-wrapper {
    width: 100%;
    background: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
    justify-content: center;
}
.header-inner {
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    min-height: 60px;
    gap: 32px;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.blog-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--el-color-primary);
}
.navbar-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--el-color-primary);
    transition: color 0.2s;
}
.nav-links {
    display: flex;
    gap: 32px;
}
.nav-links a {
    color: var(--el-text-color-primary);
    font-weight: 500;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}
.nav-links a.router-link-exact-active {
    color: var(--el-color-primary);
}
.nav-links a:hover {
    color: var(--el-color-primary);
}
.header-right {
    display: flex;
    align-items: center;
}
</style>